<template>
  <div class="city-rank-container card-area" v-loading="dataLoading">
    <div class="card-title">
      <h3>恶意类型分布</h3>
    </div>
    <Empty v-if="!dataLoading && !rankData.length"></Empty>
    <div class="ranking-area">
      <ul class="ranking-content">
        <li v-for="(item, index) in rankData" :key="index" class="ranking-item" :class="`_${index + 1}`">
          <div class="info">
            <div class="name">
              <i class="icon"></i>
              <span>{{ item.viewName}}</span>
            </div>
            <div class="percent">
              <span>{{ item.eventNum }}</span>
              <span> ∣ </span>
              <span>{{ item.percent}}%</span>
            </div>
          </div>
          <div class="outer">
            <div class="inner" :style="{ width: `${item.percent}%` }"></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
const chartData = [
  {
    "viewName": "20240401",
    "eventNum": 19,
    "aptOrg": "黑客组织一,黑客组织2"
  },
  {
    "viewName": "20240402",
    "eventNum": 2,
    "aptOrg": "黑客组织一,黑客组织2"
  },
  {
    "viewName": "20240403",
    "eventNum": 3,
    "aptOrg": "silverfox,黑客组织一,黑客组织2"
  },
  {
    "viewName": "20240404",
    "eventNum": 1,
    "aptOrg": "silverfox"
  },
  {
    "viewName": "20240405",
    "eventNum": 2,
    "aptOrg": "silverfox,APT-C-53(Gamaredon)"
  },
  {
    "viewName": "20240406",
    "eventNum": 1,
    "aptOrg": "APT-C-53(Gamaredon)"
  },
  {
    "viewName": "20240407",
    "eventNum": 8,
    "aptOrg": "Lotus Blossom,APT-C-26(Lazarus),NewsBeef,APT-C-20(APT28),APT-C-53(Gamaredon),MuddyWater,DarkHydrus,APT-C-00(海莲花)"
  },
  {
    "viewName": "20240408",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240409",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240410",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240411",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240412",
    "eventNum": 10,
    "aptOrg": ""
  },
  {
    "viewName": "20240413",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240414",
    "eventNum": 8,
    "aptOrg": ""
  },
  {
    "viewName": "20240415",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240416",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240417",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240418",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240419",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240420",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240421",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240422",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240423",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240424",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240425",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240426",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240427",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240428",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240429",
    "eventNum": 0,
    "aptOrg": ""
  },
  {
    "viewName": "20240430",
    "eventNum": 0,
    "aptOrg": ""
  },
];
import {orderBy} from 'lodash';
import Empty from '@/components/Empty.vue'
export default {
  name: "CityRankArea",
  components: {Empty},
  data() {
    return {
      dataLoading: true,
      rankData: [],
    }
  },
  props: {
    viewType: {
      type: Number,
      required: true,
    },
    datePickerValue: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  computed: {
    cardTitle() {
      switch (this.viewType) {
        case 2:
          return '攻击组织';
        case 3:
          return '恶意域名';
        case 4:
          return '恶意IP';
      }
    }
  },
  methods: {
    initComp() {
      console.log('城市排行组件获取数据了------', this.datePickerValue);
      new Promise((resolve) => {
        setTimeout(()=>{
          resolve(true);
        }, 1000)
      }).then(() => {
        this.formatData(orderBy(chartData, ['eventNum'], ['desc']));
      })
    },
    formatData(data) {
      this.rankData = [];
      const total = (data || []).reduce((a, b) => {
        return a + b.eventNum;
      }, 0);
      for (const item of data) {
        this.rankData.push({
          viewName: item.viewName,
          eventNum: item.eventNum,
          percent: ((item.eventNum / (total || 1)) * 100).toFixed(0),
        });
      }
      this.dataLoading = false;
    },
  }
}
</script>

<style lang="scss">
.city-rank-container.card-area {
  width: 430px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 10px;

  .card-title {
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;

    > h3 {
      color: #808191;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .ranking-area {
    width: 100%;
    height: 253px;
    padding: 0 20px 15px 20px;
    font-size: 15px;
    overflow-y: auto;

    .ranking-item {
      margin-bottom: 10px;
      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 15px;
        .name {
          display: flex;
          align-items: center;
          color: #B6B6BF;
          .icon {
            width: 5px;
            height: 5px;
            border-radius: 100%;
            background: #436bd9;
            margin-right: 7px;
          }
        }
        .percent {
          padding: 2px 8px;
          background: rgba(67,107,217, 0.2);
          border-radius: 3px;
          color: #436bd9;
        }
      }
      .outer {
        margin-top: 3px;
        width: 100%;
        height: 6px;
        border-radius: 5px;
        background: #e1e3ed;
        .inner{
          background: #436bd9;
          height: inherit;
          border-radius: 5px;
        }
      }

      &._1 {
        .name {
          .icon {
            background: rgb(235, 95, 94);
          }
        }
        .percent {
          background: rgba(235, 95, 94, 0.2);
          color: rgb(235, 95, 94);
        }
        .inner{
          background: rgb(235, 95, 94);
        }
      }
      &._2 {
        .name {
          .icon {
            background: rgb(252, 127, 84)
          }
        }
        .percent {
          background: rgba(252, 127, 84, 0.2);
          color: rgb(252, 127, 84);
        }
        .inner{
          background:rgb(252, 127, 84);
        }
      }
      &._3 {
        .name {
          .icon {
            background: rgb(245, 158, 59);
          }
        }
        .percent {
          background: rgba(245, 158, 59, 0.2);
          color: rgb(245, 158, 59);
        }
        .inner{
          background: rgb(245, 158, 59);
        }
      }
    }
  }
}
</style>